$font-size-base: 14px;
$font-size-small: 11px;
$base-line-height: 1.4;

body {
  font-size: $font-size-base;
  line-height: $base-line-height;
  -webkit-font-smoothing: antialiased;
  font-family: 'Roboto', 'Arial', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  flex: 0 0 100%;
}

ul {
  margin: 0;
}

.no-mb {
  margin-bottom: 0;
}

.mt-1 {
  margin-top: 1rem;
}

.mb-1 {
  margin-bottom: 1rem;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.muted {
  color: #999;
}

.capitalize {
  text-transform: capitalize;
}

.small {
  font-size: 85%;
}

.disclaimer {
  @extend .muted;
  @extend .small;
}

%ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

strong {
  font-weight: bold;
}

.capitalize {
  text-transform: capitalize;
}

.monospace {
  font-family: monospace;
}

code {
  background: #ddd !important;
  color: black !important;
  padding: 0 3px;
  border-radius: 3px;
  font-family: monospace;
}

h1, .h1, h2, .h2  {
  font-weight: bold;
  font-size: 1.75rem;
  line-height: 1.75rem;
  margin: 1rem 0;
  color: var(--color-text);
}

h3, .h3 {
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.5rem;
  margin: 1rem 0;
  color: var(--color-text);
}

h4, .h4 {
  font-weight: bold;
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 1rem 0;
  color: var(--color-text);
}

h5, .h5 {
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 0.5rem 0;
  color: var(--color-text);
}

h6, .h6 {
  font-weight: bold;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0.5rem 0;
  color: var(--color-text);
}

.text {
  font-size: $font-size-base;
  line-height: $base-line-height;
  color: var(--color-text);

  &--large {
    font-size: 1.2rem;
    line-height: 1.5;
  }

  &--small {
    font-size: 0.875rem;
    line-height: 0.875rem;
    letter-spacing: 0.01em;
  }

  &--smaller {
    font-size: 0.775rem;
    line-height: 0.775rem;
    letter-spacing: 0.01em;
  }

  &--xs {
    font-size: 0.675rem;
    line-height: 0.675rem;
    letter-spacing: 0.01em;
  }

  &--bold {
    font-weight: bold;
  }

  &--muted {
    color: var(--color-mutted);
  }

  &--long {
    max-width: 750px;
  }

  &--right {
    text-align: right;
  }

  &--capitalize {
    text-transform: capitalize;
  }
}

span {
  font-size: $font-size-base;
  line-height: $base-line-height;
  color: var(--color-text);
}

p, li, code, th, td {
  font-size: $font-size-base;
  line-height: $base-line-height;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}

.react-tooltip {
  max-width: 40vw;
  z-index: 50000;
  background: var(--color-content-background) !important;
  color: var(--color-text) !important;
  opacity: 1 !important;
  border-radius: 8px !important;
  box-shadow: 0 0 3px 1px var(--color-text) !important;
  border: 2px solid var(--color-border-light);
  font-size: $font-size-base !important;
  line-height: $base-line-height !important;
}
